.channel-view {
  padding: 20px;
  margin-top: 56px; /* 避免被导航栏遮挡 */
  background-color: #f0f2f5; /* 浅背景色 */
  min-height: calc(100vh - 56px);
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 响应式网格，每列最小250px */
  gap: 15px; /* 网格间距 */
  padding: 0 20px; /* 左右内边距 */
  /* max-width: 1200px; */ /* 移除最大宽度限制 */
  margin: 0 auto; /* 居中 */
}

.channel-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.channel-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.channel-item img {
  width: 100%;
  height: 200px; /* 固定图片高度 */
  object-fit: cover; /* 保持图片比例 */
  display: block;
}

.channel-tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
}

/* 电脑端适配 (大于 768px) */
@media screen and (min-width: 769px) {
  .channel-grid {
    /* 固定为四列，每列等宽 */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
    padding: 0 40px; /* 减小左右内边距 */
  }

  .channel-item img {
     height: 250px; /* 增大电脑端图片高度 */
  }
}

/* 平板适配 (481px - 768px) */
@media screen and (max-width: 768px) {
  .channel-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 平板显示更多列 */
    gap: 10px;
    padding: 0 10px;
  }

  .channel-item img {
     height: 180px; /* 平板图片高度 */
  }

  .channel-tag {
    font-size: 14px;
    padding: 4px 8px;
  }
}

/* 手机适配 (小于 480px) */
@media screen and (max-width: 480px) {
  .channel-view {
    padding: 10px;
  }

  h1 {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .channel-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 手机显示更多列 */
    gap: 8px;
    padding: 0 5px;
  }

  .channel-item img {
     height: 150px; /* 手机图片高度 */
  }

  .channel-tag {
    font-size: 12px;
    padding: 3px 6px;
    bottom: 8px;
    left: 8px;
  }
}